<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>MapReduce App List</title>
    <!--导航栏特效CSS-->
    <link rel="stylesheet" href="/cykmr/plugin/navbar/css/navbar.css">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/multi-select/0.9.12/css/multi-select.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/cykmr/plugin/tip/css/just-tip.css">

    <!--alert-->
    <link rel="stylesheet" href="/cykmr/plugin/alert/css/alert.css">
    <!--应用弹框-->
    <link rel="stylesheet" href="/cykmr/app/css/app_list.css">

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/multi-select/0.9.12/js/jquery.multi-select.min.js"></script>
    <!--plugins-->
    <script src="/cykmr/plugin/tip/js/justTools.js"></script>

    <script src='/cykmr/plugin/alert/js/alert.min.js'></script>

    <script src="/cykmr/app/js/input-select.js"></script>
    <script src="/cykmr/app/js/parameter.js"></script>
    <script src="/cykmr/app/js/app-list.js"></script>
    <script src="/cykmr/app/js/app-status.js"></script>

    <!--导航栏特效JS-->
    <script src="/cykmr/plugin/navbar/js/navbar.js"></script>
    <script>
        $(function () {
            var $appParameters = $('#app-parameters');
            var $sparkProperties = $('#spark-properties');
            var $environmentVariables = $('#environment-variables');
            var $appInput = $('#app-input');
            var $appOutput = $('#app-output');
            $appParameters.on('show.bs.collapse', function () {
                $sparkProperties.collapse('hide');
                $environmentVariables.collapse('hide');
            });
            $sparkProperties.on('show.bs.collapse', function () {
                $appParameters.collapse('hide');
                $environmentVariables.collapse('hide');
            });
            $environmentVariables.on('show.bs.collapse', function () {
                $appParameters.collapse('hide');
                $sparkProperties.collapse('hide');

            });
            $appInput.on('show.bs.collapse', function () {
                $appOutput.collapse('hide');
            });
            $appOutput.on('show.bs.collapse', function () {
                $appInput.collapse('hide');
            });
        });
    </script>
    <script src="/cykmr/data/js/data-show-bar.js"></script>
</head>

<body>

    <!--导航栏-->
    <div id="menu2" class="menu" >
        <ul>
            <li><a href="/cykmr/app/app_list.html">首　　页</a></li>
            <li><a href="/cykmr/file/file_list.html">文件管理</a></li>
            <li><a href="#">数据展示</a></li>
            <li><a href="/cykmr/cluster/cluster_list.html">集群管理</a></li>
        </ul>
        <div class="cls"></div>
    </div>
    <!--导航栏-->
<!--<div class="container">-->
<!--</div>-->

<div id="app-list" class="app-container">

    <div class="table-container">
        <div>
            <button class="btn btn-success" data-toggle="modal" data-target="#editApp" style="margin-bottom: 5px">添加
            </button>
        </div>
        <table class="table table-striped">
            <!--<caption>Spark App 列表</caption>-->
            <thead>
            <tr>
                <th>App标识</th>
                <th>App名称</th>
                <th>App类型</th>
                <th>创建时间</th>
                <th>更新时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="app-row"></tbody>
        </table>

    </div>
</div>
<!-- 添加App编辑窗口 -->
<div class="modal fade" id="editApp" tabindex="-1" role="dialog" aria-labelledby="appEditLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="display: flex; justify-content: center; align-items: center;">
                <h4 class="modal-title" id="appEditLabel">App编辑窗口</h4>
                <!--<button type="button" class="close" data-dismiss="modal" style="float: left">&times;</button>-->
            </div>
            <div class="modal-body">

                <div class="input-group" style="margin-top: 10px;">
                    <span class="input-group-addon skyBlue">App名称</span>
                    <input class="form-control" id="appName" placeholder="给你的App取个名字">
                </div>

                <div class="input-group" style=" margin-top: 10px;">
                    <span class="input-group-addon skyBlue">App类型</span>
                    <select class="form-control" readonly id="appType" >
                        <option id="inverted-index" value="/hadoop/jars/invertedIndex.jar">倒排索引</option>
                        <option id="data-dedup" value="/hadoop/jars/dedup.jar">数据去重</option>
                        <option id="data-sort"  value="/hadoop/jars/sort.jar">数据排序</option>
                        <option id="average-score"  value="/hadoop/jars/score.jar">平均成绩</option>
                        <option id="st-join"  value="/hadoop/jars/stjoin.jar">单表关联</option>
                        <option id="mt-join" value="/hadoop/jars/mtjoin.jar" >多表关联</option>
                        <option id="word-count" value="/hadoop/jars/wordcount.jar">单词统计</option>
                    </select>
                </div>

                <div>
                    <div class="input-group"
                         style="margin-top: 10px;display: flex; justify-content: center; align-items: center;">
                        <span class="input-group-addon deepBlue" data-toggle="collapse" data-target="#app-parameters"> App参数</span>
                        <span class="input-group-addon deepBlue" data-toggle="collapse" data-target="#spark-properties"> MapReduce属性</span>
                    </div>

                    <div id="app-parameters" class="collapse in">
                        <div class="input-group" style="margin-top: 10px;">
                            <span class="input-group-addon skyBlue">Resource</span>
                            <input class="form-control"
                                   id="appResource" placeholder="app资源">
                        </div>

                        <div class="input-group" style="margin-top: 10px;">
                            <span class="input-group-addon skyBlue">Class</span>
                            <input class="form-control" value="yk.com.mr.WordCountEntrance"
                                   id="mainClass" placeholder="app入口">
                        </div>

                    </div>
                    <div id="spark-properties" class="collapse in">
                        <div class="input-group" style="margin-top: 10px;">
                            <span class="input-group-addon skyBlue">Jars</span>
                            <input class="form-control" id="spark-jars" placeholder="依赖包">
                        </div>
                        <div class="input-group" style="margin-top: 10px;">
                            <span class="input-group-addon skyBlue">Name</span>
                            <input class="form-control" id="spark-app-name" placeholder="应用名称">
                        </div>

                    </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer" style="display: flex; justify-content: center; align-items: center;">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="app-add">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- IO编辑窗口） -->
<div class="modal fade" id="ioApp" tabindex="-1" role="dialog" aria-labelledby="appIOLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="display: flex; justify-content: center; align-items: center;">
                <h4 class="modal-title" id="appIOLabel">IO编辑窗口</h4>
            </div>
            <div class="modal-body">
                <div>
                    <div class="input-group"
                         style="margin-top: 10px;display: flex; justify-content: center; align-items: center;">
                        <span class="input-group-addon deepBlue" data-toggle="collapse" data-target="#app-input">&nbsp;&nbsp;Input &nbsp;</span>
                        <span class="input-group-addon deepBlue" data-toggle="collapse"
                              data-target="#app-output">Output</span>
                    </div>
                    <div id="app-input" class="collapse in">

                        <div style="display: flex; justify-content: center;margin-top: 10px">
                            <label for="app-input-select"></label><select id='app-input-select' multiple
                                                                          name="app-input-select[]"></select>
                        </div>
                    </div>
                    <div id="app-output" class="collapse in">
                        <div class="input-group" style="margin-top: 10px;">
                            <span class="input-group-addon skyBlue">Output</span>
                            <input class="form-control" id="app-output-select" value="/hadoop/user/out"
                                   placeholder="App输出">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="display: flex; justify-content: center; align-items: center;">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="app-io-cancel">取消</button>
                <button type="button" class="btn btn-primary" id="app-io-add">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- App状态查询窗口-->
<div class="modal fade" id="statusApp" tabindex="-1" role="dialog" aria-labelledby="appStatusLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="display: flex; justify-content: center; align-items: center;">
                <h4 class="modal-title" id="appStatusLabel">状态查询窗口</h4>
            </div>
            <div class="modal-body">
                <div style="margin-top: 10px;display: flex; justify-content: center; align-items: center;">
                    <div class="input-group">
                        <span class="input-group-addon skyBlue">提交</span>
                        <input class="form-control" id="app-submit-status" value="未提交" readonly placeholder="提交状态"/>
                    </div>
                </div>
                <div style="margin-top: 10px;display: flex; justify-content: center; align-items: center;">
                    <div class="input-group">
                        <span class="input-group-addon skyBlue">运行</span>
                        <input class="form-control" id="app-process-status" value="未运行" readonly placeholder="运行状态"/>
                    </div>
                </div>

            </div>
            <div class="modal-footer" style="display: flex; justify-content: center; align-items: center;">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="app-exit-btn">退出</button>
                <button type="button" class="btn btn-primary" id="app-submit-btn">提交</button>
                <button type="button" class="btn btn-success" id="app-update-btn">刷新</button>
                <button type="button" class="btn btn-danger" id="app-kill-btn">终止</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>